import React, { Component } from 'react'
//input
import { Search } from 'antd-mobile'
//轮播
import { Carousel } from 'antd';
import home1 from '../../images/home1.png';
import home2 from '../../images/home2.png';
import home11 from '../../images/home(1).png';
import home12 from '../../images/home(2).png';
import home13 from '../../images/home(3).png';
import home14 from '../../images/home(4).png';
import home15 from '../../images/home(5).png';
import hometitle from '../../images/春雨活动.png';
import block1 from '../../images/block1.jpg';
import block2 from '../../images/block2.jpg';
import block3 from '../../images/block3.jpg';
import block4 from '../../images/block4.jpg';
import block5 from '../../images/block5.jpg';
//组件2
import Tab2 from '../../components/Tab2'

export default class Home extends Component {

  render() {
    const contentStyle = {
      height: '160px',
      color: '#fff',
      lineHeight: '160px',
      textAlign: 'center',
      background: '#364d79',
    };

    return (
      <div className='home'>
        <header>
          <div className="search">
            <Search placeholder='请输入内容' />
          </div>
        </header>
        <main>
          <div className="swiper">
            <Carousel autoplay>
              <div>
                <h3 style={contentStyle}>
                  <img src="https://img1.baidu.com/it/u=3443896827,3952603472&fm=26&fmt=auto" alt="" />
                </h3>
              </div>
              <div>
                <h3 style={contentStyle}>
                  <img src="https://img2.baidu.com/it/u=4197162429,2419939361&fm=26&fmt=auto" alt="" />
                </h3>
              </div>
              <div>
                <h3 style={contentStyle}>
                  <img src="https://img1.baidu.com/it/u=2564830932,1986794290&fm=26&fmt=auto" alt="" />
                </h3>
              </div>
              <div>
                <h3 style={contentStyle}>
                  <img src="https://img2.baidu.com/it/u=2254188701,678351681&fm=26&fmt=auto" alt="" />
                </h3>
              </div>
            </Carousel>
          </div>
          <div className="home12">
            <dl>
              <dt>
                <img src={home1} alt="" />
              </dt>
              <dd>
                <p>快速提问</p>
                <p> 智能匹配医生</p>
              </dd>
            </dl>
            <dl>
              <dt>
                <img src={home2} alt="" />
              </dt>
              <dd>
                <p>找医生</p>
                <p>全国60万+名医</p>
              </dd>
            </dl>
          </div>
          <div className="home12345">
            <h4>
              <p><img src={home11} alt="" /></p>
              <p>找医院</p>
            </h4>
            <h4>
              <p><img src={home12} alt="" /></p>
              <p>名医专家</p>
            </h4>
            <h4>
              <p><img src={home13} alt="" /></p>
              <p>快速购药</p>
            </h4>
            <h4>
              <p><img src={home14} alt="" /></p>
              <p>图文急诊</p>
            </h4>
            <h4>
              <p><img src={home15} alt="" /></p>
              <p>快捷电话</p>
            </h4>
          </div>
          <div className="hometitle">
            <p><img src={hometitle} alt="" /></p>
          </div>
          <div className="block">
            <h3><span>特色科室</span><span>查看全部&gt;</span></h3>
            <div className="blockimg">
              <div className="block1">
                <p><img src={block1} alt="" /></p>
                <p>
                  <span><img src={block2} alt="" /></span>
                  <span><img src={block3} alt="" /></span>
                </p>
              </div>
              <div className="block2">
                <span><img src={block4} alt="" /></span>
                <span><img src={block5} alt="" /></span>
              </div>
            </div>
          </div>
          <h3 className='hello'>你好 美洽医生</h3>
          <div className="homelist">
            <Tab2 />
          </div>
        </main>


      </div>
    )
  }
}
